<template>
  <page-container :title="route.meta.title">
    <template #content>
      <a-descriptions size="small" :column="2">
        <a-descriptions-item label="管理员">{{ userInfo?.userAccount }}</a-descriptions-item>
        <a-descriptions-item label="联系方式">
          <a>{{ userInfo?.phone }}</a>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ userInfo?.createTime }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ userInfo?.updateTime }}</a-descriptions-item>
        <a-descriptions-item label="性别">{{ userInfo?.gender }}</a-descriptions-item>
      </a-descriptions>
    </template>
    <template #extra>
      <a-button key="3">操作</a-button>
      <a-button key="2">操作</a-button>
      <a-button key="1" type="primary">主操作</a-button>
    </template>
    <template #extraContent>
      <a-space>
        <a-statistic title="Feedback" :value="1128">
          <template #prefix>
            <LikeOutlined />
          </template>
        </a-statistic>
        <a-statistic title="Unmerged" :value="93" suffix="/ 100" />
      </a-space>
    </template>
    <!-- 主内容区 -->
    <!-- <div style="height: 120vh">
      <a-result
        status="404"
        :style="{
          height: '100%',
          background: '#fff',
        }"
        title="Hello World"
        sub-title="Sorry, you are not authorized to access this page."
      >
        <template #extra>
          <a-button type="primary">Back Home</a-button>
        </template>
      </a-result>
    </div> -->
  </page-container>
</template>

<script setup lang="ts">
import { getUserInfo, getAllUsers } from '@/api/user-api/userApi';
import getUsersInfo from '@/hooks/getUsers';
import type { UserInfo, DataItem } from '@/type/type';
import { LikeOutlined } from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { useRoute } from 'vue-router';

// 创建响应式引用
const userInfo: Ref<DataItem | null> = ref(null); // 初始化为 null

onMounted(async () => {
  userInfo.value = await getUsersInfo(localStorage.getItem('userAccount'));
});

const route = useRoute();
</script>
